<div class="mat-select-trigger" cdk-overlay-origin (click)="toggle()" #origin="cdkOverlayOrigin" #trigger>
  <span
    class="mat-select-placeholder"
    [class.mat-floating-placeholder]="_selectionModel.hasValue()"
    [@transformPlaceholder]="_getPlaceholderAnimationState()"
    [style.opacity]="_getPlaceholderOpacity()"
    [style.width.px]="_selectedValueWidth"> {{ placeholder }} </span>
  <span class="mat-select-value" *ngIf="_selectionModel.hasValue()">
    <span class="mat-select-value-text">{{ triggerValue }}</span>
  </span>

  <span class="mat-select-arrow"></span>
  <span class="mat-select-underline"></span>
</div>

<ng-template
  cdk-connected-overlay
  hasBackdrop
  backdropClass="cdk-overlay-transparent-backdrop"
  [origin]="origin"
  [open]="panelOpen"
  [positions]="_positions"
  [minWidth]="_triggerWidth"
  [offsetY]="_offsetY"
  (backdropClick)="close()"
  (attach)="_onAttached()"
  (detach)="close()">

  <div
    class="mat-select-panel {{ 'mat-' + color }}"
    [ngClass]="panelClass"
    [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
    (@transformPanel.done)="_onPanelDone()"
    (keydown)="_handlePanelKeydown($event)"
    [style.transformOrigin]="_transformOrigin"
    [class.mat-select-panel-done-animating]="_panelDoneAnimating">

    <div class="mat-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
      <ng-content></ng-content>
    </div>
  </div>
</ng-template>
